﻿@using ServiceStack;
@{
    Layout = "";
}
<style>
    .ngdialog.ngdialog-theme-plain .ngdialog-content {
        width: 45% !important;
    }
</style>
<div ng-controller="AdEditController">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <form name="formValidate" ng-submit="submitForm()" novalidate="" class="form-validate form-horizontal">
                    <!-- START panel-->
                    <div class="panel panel-default" ng-class="{ 'whirl standard': isLoading,'': isLoading }">
                        <div class="panel-body">
                            <fieldset class="b0">
                                <legend>{{ResponseData.Id == 0 || ResponseData.Id == null ? '添加' : '修改'}}</legend>
                            </fieldset>
                            <fieldset ng-show="ResponseData.TypeId==1">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">标题</label>
                                    <div class="col-sm-4">
                                        <div class="form-inline">
                                            <input style="width: 70%;" type="text" name="name" ng-model="ResponseData.Tittle" class="form-control" maxlength="50" />
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset ng-show="ResponseData.TypeId!=1">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">图片</label>
                                    <div class="col-sm-3">
                                        <div class="imgcrop-preview" uploader="uploader">
                                            <img ng-src="{{myCroppedImage}}" style="max-width: 100%; max-height: 100%" onerror="javascript: this.src = '/Content/img/default.png';" />
                                            <input id="fileInput" type="file" style="display: none;" nv-file-select="" uploader="uploader" />
                                        </div>
                                        <div>
                                            <div style="" class="progress progress-xs" ng-show="uploading">
                                                <div role="progressbar" ng-style="{ 'width': uploader.progress + '%' }" class="progress-bar"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-5">
                                        <button type="button" class="mb-sm btn btn-info" ng-click="selectImage()">
                                            图片选择
                                        </button>
                                        <span class="text-danger">建议尺寸：640x320</span>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">类型</label>
                                    <div class="col-sm-6">
                                        <div class="form-inline">
                                            <select ng-options="convertToInt(m.Value) as m.Text for m in enumAdType" ng-model="ResponseData.TypeId" class="form-control">
                                                
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">链接地址</label>
                                    <div class="col-sm-4">
                                        <div class="form-inline">
                                            <input type="text" style="width:100%;" name="linkurl" required="" ng-model="ResponseData.LinkUrl" class="form-control" maxlength="250" />
                                        </div>
                                        <span ng-show="validateInput('linkurl', 'required')" class="text-danger">请输入链接地址</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">排序</label>
                                    <div class="col-sm-1">
                                        <input class="form-control" maxlength="8" ng-model="ResponseData.Sort" type="number">
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="text-danger form-control-static">数字越大显示在最前面，不填默认排序0，排序相同按照时间倒序</div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <div class="panel-footer text-right">
                            <button type="button" class="btn btn-warning" ng-click="cancel()">返回列表</button>
                            <button type="button" class="btn btn-primary" ng-click="serveMessage()">保存</button>
                        </div>
                    </div>
                    <!-- END panel-->
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    App.controller('AdEditController', ["$scope", "$state", "$http", "$stateParams", "Notify", "$filter","FileUploader","$rootScope",
        function ($scope, $state, $http, $stateParams, Notify, $filter,FileUploader,$rootScope) {
            'use strict';
            $scope.isLoading = true;
            $scope.IsCheckedPic = false;

            $scope.validateInput = function (name, type) {
                var input = $scope.formValidate[name];
                return (input.$dirty || $scope.submitted) && input.$error[type];
            };
            //数据初始化
            $http.post("/Product/AdEdit", { Id: $stateParams.Id }).then(function (response) {
                $scope.ResponseData = response.data;
                if($stateParams.Id>0){
                    $scope.myCroppedImage=$rootScope.ImgHostUrl+$scope.ResponseData.ImgUrl;
                }else{
                    $scope.ResponseData.TypeId=1;
                }
                $scope.isLoading = false;
            });

            //枚举值获取
            $scope.enumAdType = @(Html.Raw(WsdShop.Common.EnumUtil.SelectListEnum<WsdShop.Model.Enum.AdTypeEnum>(null, false).ToJson()));

            // 保存点击
            $scope.serveMessage = function () {
                $scope.submitted = true;

                $scope.isLoading = true;
                if ($scope.formValidate.$valid) {
                    if($scope.ResponseData.TypeId!=1){
                        if (!$scope.ResponseData.ImgUrl || $scope.ResponseData.ImgUrl == "") {
                            $scope.IsCheckedPic = true;
                            $scope.isLoading = false;
                            Notify.alert("请选择图片", { status: 'warning' });
                            return false;
                        }
                    }
                    if ($scope.ResponseData.TypeId == 0 || $scope.ResponseData.TypeId == "") {
                        $scope.isLoading = false;
                        Notify.alert("请选择类型", { status: 'warning' });
                        return false;
                    }
                    $http.post("/Product/AdEditSubmit", $scope.ResponseData).then(function (returnData) {
                        if (returnData.data.isSuccess) {
                            Notify.alert('操作成功!', { status: 'success' });
                            $state.go("app.adManage");
                        } else {
                            Notify.alert(returnData.data.msg, { status: 'warning' });
                            $scope.isLoading = false;
                        }
                    });

                } else {
                    $scope.isLoading = false;
                }
            };

            //返回列表
            $scope.cancel = function () {
                $state.go("app.adManage");
            }


            //-------------图片选择相关
            $scope.selectImage = function () {
                $("#fileInput").click();
            }

            var handleFileSelect = function (evt) {
                var file = $scope.uploadSelectFile = evt.currentTarget.files[0];
                if (!evt.currentTarget.files[0] || ! /image\/\w+/.test(evt.currentTarget.files[0].type)) {
                    Notify.alert('请选择图像文件', { status: 'warning' });
                    return false;
                }
                if (file.size > 1 * 1024 * 1024) {
                    Notify.alert('图片大小不能大于1MB', { status: 'warning', timeout: 3000 });
                    $scope.uploadSelectFile = null;
                    return false;
                }
                var reader = new FileReader();
                reader.onload = function (evt) {
                    $scope.$apply(function ($scope) {
                        $scope.myCroppedImage = evt.target.result;
                    });
                };
                if (file)
                    reader.readAsDataURL(file);
            };

            angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);
            var uploader = $scope.uploader = new FileUploader({
                url: $rootScope.ImgUploadUrl + '?PlatForm=wsd&Path=Ad'
            });
            uploader.filters.push({
                name: 'customFilter',
                fn: function (item /*{File|FileLikeObject}*/, options) {
                    return this.queue.length < 10;
                }
            });

            // CALLBACKS

            uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
                //  console.info('onWhenAddingFileFailed', item, filter, options);
            };
            uploader.onAfterAddingFile = function (fileItem) {
                if ($scope.uploadSelectFile && /image\/\w+/.test($scope.uploadSelectFile.type)) {
                    $scope.uploading = true;
                    fileItem.upload();
                }
                //    console.info('onAfterAddingFile', fileItem);
            };
            uploader.onAfterAddingAll = function (addedFileItems) {
                //   console.info('onAfterAddingAll', addedFileItems);
            };
            uploader.onBeforeUploadItem = function (item) {
                // console.info('onBeforeUploadItem', item);
            };
            uploader.onProgressItem = function (fileItem, progress) {
                // console.info('onProgressItem', fileItem, progress);
            };
            uploader.onProgressAll = function (progress) {
                //  console.info('onProgressAll', progress);
            };
            uploader.onSuccessItem = function (fileItem, response, status, headers) {
                $scope.ResponseData.ImgUrl= response[0];
                $("#fileInput").val("");
                //  console.info('onSuccessItem', fileItem, response, status, headers);
            };
            uploader.onErrorItem = function (fileItem, response, status, headers) {
                //  console.info('onErrorItem', fileItem, response, status, headers);
            };
            uploader.onCancelItem = function (fileItem, response, status, headers) {
                // console.info('onCancelItem', fileItem, response, status, headers);
            };
            uploader.onCompleteItem = function (fileItem, response, status, headers) {
                //  console.info('onCompleteItem', fileItem, response, status, headers);
            };
            uploader.onCompleteAll = function () {
                $scope.uploading = false;
            };


        }]);
</script>
